import "./index.scss";
import { Form, Input, Button, Row, Col } from "antd";

import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();

  //提交登录函数
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  // 跳转到注册页面
  const onRegisterClick = () => {
    navigate("/register");
  };

  const loginFun = () => {
    // console.log("登录操作");
  };
  return (
    <div className="login-container">
      <div className="login-box">
        <div className="title-box"></div> 
        <div className="form-box">
          <Form
            name="basic"
            validateTrigger="onBlur"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 17,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed} 
            autoComplete="off">
            <Form.Item
              label="用户名"
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入用户名!",
                },
                {
                  pattern: /^[a-zA-Z0-9]{1,10}$/,
                  message: "用户名必须是1-10的字母数字",
                },
              ]}>
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入密码!",
                  trigger: "blur",
                },
                {
                  pattern: /^\S{6,15}$/,
                  message: "密码必须是6-15的非空字符",
                },
              ]}>
              <Input.Password />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 0,
              }}>
              <Button onClick={loginFun} type="primary" style={{ width: "100%" }} htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
          <Row>
            <Col span={24}>
              <Button type="link" onClick={onRegisterClick}>
                去注册
              </Button>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  );
};

export default Login;

//学习
/**
 1.这里的样式区分与vue的，vue是class,但是react是className
 2.点击事件绑定区分与vue， vue是通过@click="事件名称",但是react是onClick={事件名称}
 3.validateTrigger="onBlur"焦绑定在form表单上

wrapperCol:{
  offset:    栅格左侧的间隔格数，间隔内不可以有栅格
  span:      栅格占位格数，为 0 时相当于 display: none   总有24
}
 */

